<template>
  <div>
    <div>
      <el-dialog title="用户设置" :visible.sync="dialogVisible">
        <el-tree
            :data="allRole"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps">
        </el-tree>
        <el-button @click="saveUser">
          确定
        </el-button>
      </el-dialog>
    </div>
    <el-table
        :data="userList"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="geder"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>

      <el-table-column
          prop="telphone"
          label="电话">
      </el-table-column>

      <el-table-column
          prop="registerMode"
          label="注册方式">
      </el-table-column>

      <el-table-column
          prop="school"
          label="学校">
      </el-table-column>

      <el-table-column
          prop="grade"
          label="年级">
      </el-table-column>

      <el-table-column
          prop="email"
          label="邮箱">
      </el-table-column>

      <el-table-column
          prop="avatar"
          label="头像地址">
      </el-table-column>

      <el-table-column
          prop="userType"
          label="用户类型">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getAllRole, getUserList, roleUser, saveRoleUser} from "@/network/user";
import {saveRoleResource} from "@/network/role";

export default {
  name: "ExamineUser",
  created() {
    getUserList().then(res => {
      this.userList = res.data
    });

  },
  mounted() {
    this.loadRoleList();
  },
  data() {
    return {
      userList: [],
      dialogVisible: false,
      allRole: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      editUserId: '',

    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    edit(row) {
      let _this = this;
      _this.dialogVisible = true;
      _this.editUserId = row.id;
      roleUser(row.id).then(res => {
        let checked = [];
        for (let i = 0; i < res.data.length; i++) {
          checked.push(res.data[i].roleId);
        }
        _this.$refs.tree.setCheckedKeys(checked);
      })
    },
    loadRoleList() {
      let _this = this;
      getAllRole().then(res => {
        _this.allRole = res.data;
      })
    },
    saveUser() {
      let _this = this;
      let checkedKeys = _this.$refs.tree.getCheckedKeys()

      saveRoleUser(_this.editUserId, checkedKeys).then(res => {
        _this.$message.success("用户角色设置成功");
      })
      _this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>

</style>